<template>
    <div>
        <div>
            <el-form class="form-box" ref="formRef" :model="form" label-width="auto">
                <el-row>
                    <el-col :span="24" class="margin-bottom-0">
                        <el-form-item label="收款金额：" prop="salaAmt">
                            <div class="salaAmt">{{ unpay }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="margin-bottom-0">
                        <el-form-item label="会员验证：" prop="mobile">
                            <el-input v-model="form.mobile" placeholder="扫会员码/输入手机号、会员卡号" @focus="focusForm('mobile')"
                                @blur="blurForm" clearable />
                            <div class="vip-info-box">客户姓名：{{ vip.name || '--' }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                电话：{{ vip.mobile || '--' }}</div>
                            <el-button class="search-btn" text @click="handleSearch">验证</el-button>
                            <img class="qrcode-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/vip/qrcode.png"
                                alt="">
                        </el-form-item>
                    </el-col>

                    <el-col :span="24" class="margin-bottom-0">
                        <el-form-item label="会员卡号：" prop="cardNo">
                            <el-select v-model="form.cardNo" @change="changeCardNo">
                                <el-option v-for="item in card_options" :key="item.cardNo" :value="item.cardNo"
                                    :label="`${item.cardName}：No.${item.cardNo}`" />
                            </el-select>
                            <div class="vip-info-box ">
                                本金：<span class="color-FF3333">{{ card_options.length > 0 ?
                                    card_options[currentCardIndex].currentAmt : '--' }}</span>
                                &nbsp;赠送金额：<span class="color-FF3333">{{ card_options.length > 0 ?
                                    card_options[currentCardIndex].currentPresentAmt : '--' }}</span>
                                &nbsp;金币：<span class="color-FF3333">{{ card_options.length > 0
                                    ? card_options[currentCardIndex].currentCoins : '--' }}</span>
                                &nbsp;积分：<span class="color-FF3333">{{ card_options.length > 0
                                    ? card_options[currentCardIndex].currentPoint : '--' }}</span>
                            </div>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="24">
                    <el-form-item label="优惠券：" prop="ticketCode">
                        <el-input v-model="form.ticketName" placeholder="点击选择优惠券" @click="handleTicket" />
                        <div class="vip-info-box color-FF6A00">
                            优惠券已抵扣金额: {{ checkedAmt }}元
                        </div>
                    </el-form-item>
                </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="收取金额：" prop="payAmt">
                            <el-input v-model="form.payAmt" placeholder="请输入金额" @focus="focusForm('payAmt')"
                                @blur="blurForm" clearable  oninput="value=value.replace(/[^0-9.]/g,'')"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 优惠券弹窗 -->
        <div class="dialog-box">
            <el-dialog v-model="ticketVisible" title="" top="80px" :show-close="false" :before-close="handleCancel">
                <div class="dialog-content">
                    <!-- 可用券 -->
                    <div class="dialog-title-row">
                        <div class="title">可选券 <span class="num">（{{ canUseNum }}张）</span></div>
                        <div class="tip">
                            <span>已选 <span class="color-FF6A00">{{ checkedList.length }}</span> 张</span>
                            <span class="margin-left-40">已抵扣金额 <span class="color-FF6A00">{{ checkedAmt }}</span> 元</span>
                        </div>
                    </div>
                    <div class="ticket-box">
                        <template v-for="(item, index) in ticket_options">
                            <div class="ticket cursor-pointer" @click.prevent="handleCheckedTicket(item)" :key="index"
                                v-if="item.isUse">
                                <div class="ticket-name-box">
                                    <div class="ticket-type">{{ item.typeCodeName }}</div>
                                    <div v-if="item.typeCodeName == '商品券'" class="ticket-wares font-size-24 color-FF3333">{{
                                        item.goodsName }}</div>
                                    <div v-else class="ticket-num color-FF3333"><span class="font-size-48 ">{{
                                        item.ticketAmt
                                    }}</span>元</div>
                                </div>
                                <div class="divider"></div>
                                <div class="info-box">
                                    <div>有效期：{{ item.startData }} 至 {{ item.endData }} </div>
                                    <div>兑换物品：{{ item.goodsName }}</div>
                                    <div>使用限制：
                                        <span class="color-FF6A00" v-if="item.useCondition == 0">无限制</span>
                                        <span class="color-FF6A00" v-else-if="item.useCondition == 1">每张桌台限用{{
                                            item.roomUseNum
                                        }}张</span>
                                        <span class="color-FF6A00" v-else-if="item.useCondition == 2">每个会员限用{{
                                            item.memberUseNum
                                        }}张</span>
                                    </div>
                                </div>

                                <div class="check-box">
                                    <el-checkbox v-model="item.checked"></el-checkbox>
                                </div>
                            </div>
                        </template>
                    </div>
                    <!-- 不可用券 -->
                    <div class="dialog-title-row margin-top-10">
                        <div class="title">不可选券 <span class="num">（{{ cannotUseNum }}张）</span></div>
                    </div>
                    <div class="ticket-box unUse">
                        <template v-for="(item, index) in ticket_options">
                            <div class="ticket" :key="index" v-if="!item.isUse">
                                <div class="ticket-name-box">
                                    <div class="ticket-type">{{ item.typeCodeName }}</div>
                                    <div v-if="item.typeCodeName == '商品券'" class="ticket-wares font-size-24 color-FF3333">{{
                                        item.goodsName }}</div>
                                    <div v-else class="ticket-num color-FF3333"><span class="font-size-48 ">{{
                                        item.ticketAmt
                                    }}</span>元</div>
                                </div>
                                <div class="divider"></div>
                                <div class="info-box">
                                    <div>有效期：{{ item.startData }} 至 {{ item.endData }} </div>
                                    <div>兑换物品：{{ item.goodsName }}</div>
                                    <div>使用限制：
                                        <span class="color-FF6A00" v-if="item.useCondition == 0">无限制</span>
                                        <span class="color-FF6A00" v-else-if="item.useCondition == 1">每张桌台限用{{
                                            item.roomUseNum
                                        }}张</span>
                                        <span class="color-FF6A00" v-else-if="item.useCondition == 2">每个会员限用{{
                                            item.memberUseNum
                                        }}张</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="footer-box">
                    <el-button class="cancel" @click="handleCancel">取消</el-button>
                    <el-button class="submit" @click="handleSubmit">确认</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script setup >
import { formatDecimal } from '@/utils/chenhao'
import Api from '@/api'
import ls from "@/lib/ls";
import { getLocalIPv4 } from "@/utils/getip.js";
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
// 接收父组件参数 props
const props = defineProps({
    tableInfo: {
        type: Object,
        required: false,
    },
    selectWares: {
        type: Array,
        required: false,
    },
    received: {
        type: String,
        required: false,
    },
    form: {
        type: Object,
        required: false,
    },
    price: {
        type: String,
        required: false,
    },
    unpay: {
        type: String,
        required: false,
    },
    payData: {
        type: Array,
        required: false,
    },
    saleData: {
        type: Array,
        required: false,
    },
    details: {
        type: Array,
        required: false,
    },
    vipPrice: {
        type: String,
        required: false,
    },
    vipInfo: {
        type: Object,
        required: false,
    },
})
const tableInfo = toRef(props, 'tableInfo')
const selectWares = toRef(props, 'selectWares')
const received = toRef(props, 'received')
const price = toRef(props, 'price')
const unpay = toRef(props, 'unpay')
const form = toRef(props, 'form')
const payData = toRef(props, 'payData')
const saleData = toRef(props, 'saleData')
const details = toRef(props, 'details')
const vipPrice = toRef(props, 'vipPrice')
const vipInfo = toRef(props, 'vipInfo')

const emit = defineEmits(['focusForm'])

const router = useRouter()
const todo = router.currentRoute.value.query.todo
const cardNo = router.currentRoute.value.query.cardNo

// 数字键盘
const focusForm = (str) => {
    // keyboard.value = true
    emit('focusForm', str)
}
const blurForm = (params) => {
    // keyboard.value = false
}
onMounted(() => {
    if (form.value.mobile && form.value.mobile.length > 0) {
        handleSearch()
    }
})
watch(() => unpay.value, (newvalue, oldvalue) => {
    form.value.payAmt = newvalue
})
// 查询会员
let vip = ref({})
let card_options = ref([])
let ticket_options = ref([])
let currentCardIndex = ref(0)
const handleSearch = () => {
    if (!form.value.mobile) return
    // console.log(mobile.value)
    Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": form.value.mobile } })
        .then(res => {
            console.log('搜索会员res :>> ', res);
            if (res.result == '') return ElNotification({
                title: '提示',
                message: '没有搜索到会员',
                type: 'warning',
            })
            vip.value = res
            card_options.value = res.cardList
            form.value.cardNo = res.cardList[0].cardNo
            // || todo == 'mountPay'
            if (todo == 'orderChange') {
                setVipInfo()
            }
        })
}

const setVipInfo = (params) => {
    card_options.value.forEach(item => {
        if (item.memberIsPayCard == 1) {
            vipInfo.value.hasVipPrice = true
            vipInfo.value.priceType = '2'
            if (Number(price.value) == Number(vipPrice.value)) return
            let flag = false
            saleData.value.forEach((item, $index) => {
                if (item.yhxm == '会员折扣优惠') {
                    flag = true
                }
            });
            if (!flag) {
                const saleObj = {
                    yhxm: '会员折扣优惠',
                    je: Number(price.value) - Number(vipPrice.value),
                    code: router.currentRoute.value.query.payBatchCode,
                    amt: Number(price.value) - Number(vipPrice.value),
                    type: '会员折扣优惠',
                    subType: '',
                }
                saleData.value.push(saleObj)
            }
        }
    })
}

const changeCardNo = (v) => {
    // console.log('v :>> ', v);
    card_options.value.forEach((item, index) => {
        if (item.cardNo == v) {
            currentCardIndex.value = index
        }
    });
    // if (todo == 'orderChange') {
    //     setVipInfo()
    // }
}

// 获取优惠券
let canUseNum = ref(0)
let cannotUseNum = ref(0)
let usedTickets = ref([])
const getTicket = (params) => {
    resetTicketForm()
    // let goods = selectWares.value.map(item => {
    //     return item
    // })
    let data = {
        memberCarCode: card_options.value[currentCardIndex.value].cardNo,
        consumeCode: tableInfo.value.consumeCode,
        orderDetails: JSON.stringify(selectWares.value),
    }
    console.log('查询优惠券前的data :>> ', data);
    Api.Common.PcObjProcess.Do({ "functionName": "GetMenberTicket", "orgCode": "0004", "contentData": data })
        .then(res => {
            console.log('查询优惠券res :>> ', res);
            ticket_options.value = res.ticketList.map(item => {
                return {
                    ...item,
                    checked: false,
                }
            })
            canUseNum.value = 0
            cannotUseNum.value = 0
            ticket_options.value.forEach(item => {
                if (item.isUse) {
                    canUseNum.value += 1
                } else {
                    cannotUseNum.value += 1
                }
            })
            usedTickets.value = res.ticketUseList
        })
}

// 父组件小键盘点击确定
const handleKeyboardConfirm = (params) => {
    if (!form.value.cardNo) return ElNotification({
        title: '提示',
        message: '请选择会员卡',
        type: 'warning',
    })
    if (unpay.value <= 0) return ElNotification({
        title: '提示',
        message: '收款金额为0无法收款',
        type: 'warning',
    })
    if (Number(form.value.payAmt) > Number(unpay.value)) return ElNotification({
        title: '提示',
        message: '收取金额不能大于收款金额',
        type: 'warning',
    })
    if (!form.value.payAmt) return ElNotification({
        title: '提示',
        message: '请输入收取金额',
        type: 'warning',
    })
    configStore.payFlag = true // 支付开关
    // 换菜
    if (todo == 'orderChange') {
        orderChange()
    }
    // 挂账还款
    else if (todo == 'mountPay') {
        mountPay()
    }
}

// 选择优惠券弹窗
let ticketVisible = ref(false)
const handleTicket = (params) => {
    if (!vip.value.memberCode) return ElNotification({
        title: '提示',
        message: '请先验证会员',
        type: 'warning',
    })
    ticketVisible.value = true
}

const handleCancel = (params) => {
    ticketVisible.value = false
}
// 确认优惠券弹窗
const handleSubmit = async (params) => {
    // console.log('checkedList.value :>> ', checkedList.value);
    const nameList = checkedList.value.map(item => item.goodsName)
    form.value.ticketName = nameList.join(',')
    const codeList = checkedList.value.map(item => item.code)
    form.value.ticketCode = codeList.join(',')
    await order()
    // 处理勾选的商品
    let detailList = []
    console.log('details.value :>> ', details.value);
    if (details.value.length > 0) {
        console.log('1 :>> ', 1);
        detailList = details.value
    } else {
        console.log('2 :>> ', 2);
         console.log(selectWares.value);
        let toolArr = []
        selectWares.value.forEach(item=>{
            toolArr.push(item)
            if (item.subGoods && item.subGoods.length > 0) {
                toolArr.push(...item.subGoods)
            }
        })
   
        console.log(toolArr);
        
        detailList = toolArr.map(item => {
            return item.itemCode
        })
    }
    const obj = {
        zffs: '会员优惠券',
        skje: formatDecimal(checkedAmt.value),
        consumeCode: form.value.consumeCode,
        payType: '012',
        totalAmt: unpay.value,
        payAmt: checkedAmt.value,
        memberCode: vip.value.memberCode,
        memberName: vip.value.memberName,
        memberMobile: vip.value.mobile,
        memberOpenId: vip.value.openId,
        cardNo: form.value.cardNo,
        ticketCode: form.value.ticketCode,
        detailList,
    }
    const data = {
        payType: '012',
        consumeCode: tableInfo.value.consumeCode,
        roomCode: tableInfo.value.roomCode,
        payBatchCode: tableInfo.value.payBatchCode,
        orderAmt: price.value,
        realPayAmt: checkedAmt.value,
        detailList: detailList.join(','),
        payList: [obj],
        serviceAmt: saleData.value,

        memberCarCode: card_options.value[currentCardIndex.value].cardNo,
        itemCode: detailList.join(','),
        memberTicketCode: form.value.ticketCode,
        consumeCode: form.value.consumeCode,
        roomCode: tableInfo.value.roomCode,
        memberMobile: vip.value.mobile,
    }
    console.log('data :>> ', JSON.stringify({ "functionName": "UseMenberTicket", "orgCode": "0004", "contentData": data }));
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "UseMenberTicket", "orgCode": "0004", "contentData": data })
        .then(res => {
            console.log('使用优惠券 res :>> ', res);
            if (res.list && res.list.length > 0) {
                res.list.forEach(item => {
                    obj.zffs = item.ticketName
                    obj.skje = item.ticketAmt
                    obj.itemCode = item.itemCode
                    obj.payBatchCode = item.payBatchCode
                    tableInfo.value.payBatchCode = item.payBatchCode
                    const nobj = { ...obj }
                    payData.value.push(nobj)
                })
                ticketVisible.value = false
                getTicket()
            }
            // obj.itemCode = detailList.join(',')
            // obj.payBatchCode = tableInfo.value.payBatchCode
            // payData.value.push(obj)
            // form.value.payAmt = ''
        })
}

// 打勾优惠券
import { returnCheckedTicket, table_use, menber_use, count_use } from './ticketRules'
let checkedList = ref([])
let checkedAmt = ref(0)
const handleCheckedTicket = (item) => {
    // 判断如果是取消勾选就不进入之后的验证
    if (item.checked) {
        item.checked = !item.checked
        returnCheckedTicket(item, usedTickets.value, selectWares.value)
        return
    }

    // 验证桌台使用限制
    let res1 = table_use(item, usedTickets.value, selectWares.value)
    console.log('res1 :>> ', res1);
    if (!res1.flag) return ElNotification({
        title: '提示',
        message: res1.errMsg,
        type: 'warning',
    })
    // 验证会员使用限制
    let res2 = menber_use(item, usedTickets.value, selectWares.value)
    console.log('res2 :>> ', res2);
    if (!res2.flag) return ElNotification({
        title: '提示',
        message: res2.errMsg,
        type: 'warning',
    })

    // console.log('usedTickets.value :>> ', usedTickets.value);
    // 验证n个商品用的券不能超过n张
    let res3 = count_use(item, checkedList.value, selectWares.value)
    console.log('res3 :>> ', res3);
    if (!res3.flag) return ElNotification({
        title: '提示',
        message: res3.errMsg,
        type: 'warning',
    })

    item.checked = !item.checked
    checkedAmt.value = 0
    console.log('push :>> ',);
    checkedList.value.push(item)
    checkedAmt.value += (+item.ticketAmt)
}

// 初始化已选优惠卷信息
const resetTicketForm = (params) => {
    checkedList.value = []
    // checkedAmt.value = 0
    // form.value.ticketName = ""
    form.value.ticketCode = ""
}

// 监听勾选的未结账商品
watch(selectWares, (newVal, oldVal) => {
    console.log('监听selectWares :>> ', selectWares);
    if (!form.value.cardNo) return
    getTicket()
}, { deep: true })

// 下单接口
// 获取缓存里的菜单用来判断是否是点餐路由跳转来的,如果是就要下单
const order = async (params) => {
    const waresOrder = ls.get("WARES_ORDER") || [];
    if (waresOrder && waresOrder.length > 0) {
        let contentData = {
            consumeCode: ls.get("TABLE_INFO").consumeCode,
            roomCode: ls.get("TABLE_INFO").roomCode,
            // consumeCode: "0004202402050006",
            // roomCode: "0004003",
            operType: "",
            detail: waresOrder,
            payType: '2',
        };
        console.log("waresOrder :>> ", waresOrder);
        // return
        await Api.Common.PcObjProcess.Do({
            functionName: "orderAdd",
            contentData,
        }).then((res) => {
            console.log("下单 res :>> ", res);
            res.dataList.forEach((item) => {
                console.log('555 :>> ', 5555);
                details.value.push(item.itemCode)
            });
            console.log('details :>> ', details.value);
            ls.remove("WARES_ORDER");
        });
    }
};
let isVip = ref(false)
const orderChange = async(params) => {
    // 处理勾选的商品
    let detailList = []
    if (details.value.length > 0) {
        detailList = details.value
    } else {
         console.log(selectWares.value);
        let toolArr = []
        selectWares.value.forEach(item=>{
            toolArr.push(item)
            if (item.subGoods && item.subGoods.length > 0) {
                toolArr.push(...item.subGoods)
            }
        })
   
        console.log(toolArr);
        
        detailList = toolArr.map(item => {
            return item.itemCode
        })
    }
    console.log(vip.value);
    vip.value.cardList.forEach(item => {
        if (item.memberIsPayCard == 1) {
            isVip.value = true
        }
    })
    const sendAmtForm = {
            amt:price.value ,// 当前订单金额
            payAmt:form.value.payAmt, // 本次支付金额
            cardNo:form.value.cardNo ,// 会员卡号
            isVipPay:isVip.value ? '1':'0' ,// 是否会员权益支付 0 否 1是
            goods:JSON.stringify(selectWares.value) ,// 商品信息
        }
        console.log(sendAmtForm);
        
        if(isVip.value){
            sendAmtForm.amt = vipPrice.value
        }
        let prePayAmt = 0
        let payPreAmtRate = 0
        // 获取赠送金额
        await Api.Common.PcObjProcess.Do({
            functionName: 'GetPrePayAmt',
            contentData: sendAmtForm
        }).then(res=>{
            prePayAmt = res.payPreAmt
            payPreAmtRate = res.payPreAmtRate
            
        }).catch(err=>{
            console.log(err);
            
        })
        let obj = {}
        if(prePayAmt >= form.value.payAmt){
            obj = {
                zffs: form.value.actionType,
                skje: formatDecimal(form.value.payAmt),
                consumeCode: form.value.consumeCode,
                payType: '004',
                totalAmt: unpay.value,
                payAmt: 0,
                prePayAmt:prePayAmt,
                payPreAmtRate:payPreAmtRate,
                memberCode: vip.value.memberCode,
                memberName: vip.value.memberName,
                memberMobile: vip.value.mobile,
                memberOpenId: vip.value.openId,
                cardNo: form.value.cardNo,
                ticketCode: form.value.ticketCode,
                detailList,
            }
        }else{
            obj = {
                zffs: form.value.actionType,
                skje: formatDecimal(form.value.payAmt),
                consumeCode: form.value.consumeCode,
                payType: '004',
                totalAmt: unpay.value,
                payAmt: formatDecimal(form.value.payAmt - prePayAmt),
                prePayAmt:prePayAmt,
                payPreAmtRate:payPreAmtRate,
                memberCode: vip.value.memberCode,
                memberName: vip.value.memberName,
                memberMobile: vip.value.mobile,
                memberOpenId: vip.value.openId,
                cardNo: form.value.cardNo,
                ticketCode: form.value.ticketCode,
                detailList,
            }
        }
    const data = {
        payType: '004',
        consumeCode: tableInfo.value.consumeCode,
        roomCode: tableInfo.value.roomCode,
        payBatchCode: tableInfo.value.payBatchCode,
        orderAmt: price.value,
        realPayAmt: form.value.payAmt,
        detailList: detailList.join(','),
        payList: [obj],
        serviceAmt: saleData.value
    }
    Api.Common.PcObjProcess.Do({ "functionName": "OrderPay", "orgCode": "0004", "contentData": data })
        .then(res => {
            configStore.ispaying.id ++
            console.log('买单确认res :>> ', res);
            obj.itemCode = res.itemCode
            obj.payBatchCode = res.payBatchCode
            tableInfo.value.payBatchCode = res.payBatchCode
            payData.value.push(obj)
            const ls_orderChange = ls.get('orderChange')
            if (ls_orderChange) {
                ls_orderChange.payData = payData.value
                ls.set('orderChange', ls_orderChange)
            }
            form.value.payAmt = ''
        })
        .catch(err=>{
            configStore.ispaying.id ++
        })
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });

// 挂账还款
const mountPay = (params) => {
    // console.log('挂账还款支付确认 data :>> ', router.currentRoute.value.query);
    const { consumeCode, payBatchCode, roomCode, payItemCode } = router.currentRoute.value.query
    const obj = {
        zffs: form.value.actionType,
        skje: formatDecimal(form.value.payAmt),
        consumeCode,
        payType: '004',
        totalAmt: unpay.value,
        payAmt: form.value.payAmt,
        tradeNo: form.value.payCode,
    }
    const data = {
        payType: '004',
        payItemCode,
        consumeCode,
        roomCode,
        payBatchCode,
        payAmt: form.value.payAmt,
        // payList: [obj],
        serviceAmt: saleData.value,
        memberCard: form.value.cardNo,
        ip:ip.value
    }
    // return
    console.log('挂账还款接口调用前的 data :>> ', data);
    Api.Common.PcObjProcess.Do({ "functionName": "MountPay", "contentData": data })
        .then(res => {
            configStore.ispaying.id ++
            console.log('挂账还款 res :>> ', res);
            obj.itemCode = res.itemCode
            payData.value.push(obj)
            form.value.payAmt = ''
            form.value.payCode = ''
        })
}

// 暴露方法给父组件
defineExpose({ handleKeyboardConfirm })
</script>

<style scoped lang="scss">
.form-box {
    margin-top: 10px;

    ::v-deep {
        .el-input__wrapper {
            background: #F9F9F9;
            border-radius: 8px;
            border: 0;
            font-size: 12px;
            color: #999999;
        }
    }

    .margin-bottom-0 {
        ::v-deep {
            .el-form-item {
                margin-bottom: 0px;
            }
        }
    }

    .salaAmt {
        font-weight: 400;
        font-size: 16px;
        color: #FF3333;
    }

}

.search-btn {
    font-weight: 400;
    font-size: 16px;
    color: #FF6A00 !important;
    width: 50px;
    // height: 50px;
    position: absolute;
    right: 40px;
    top: 0px;
}

.qrcode-img {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
}

.vip-info-box {
    font-size: 12px;
    color: #212121;
}

.margin-bottom-20 {
    margin-bottom: 10px;
}

.color-FF3333 {
    color: #FF3333;
}

.color-FF6A00 {
    color: #FF6A00;
}

.dialog-box {
    ::v-deep {
        .el-dialog__header {
            padding: 0;
        }

        .el-dialog {
            width: 860px;
            // height: 800px;
            background: #FFFFFF;
            border-radius: 16px;
            padding: 10px 30px;
        }
    }

    .footer-box {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }

    .dialog-content {
        height: 650px;
        overflow-y: auto;
        overflow-x: hidden;

        .ticket-box {
            margin-top: 10px;
            width: 800px;
            // height: 450px;
            background: #FAFAFA;
            border-radius: 16px;
            padding: 10px;

            .ticket {
                // margin: 0 auto;
                width: 780px;
                // height: 100px;
                background: #FFFBE5;
                border-radius: 8px;
                margin-bottom: 5px;
                display: flex;
                align-items: center;

                .ticket-name-box {
                    width: 160px;
                    padding: 10px 0;
                    // height: 100px;
                    text-align: center;

                    .ticket-type {
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 18px;
                        color: #212121;
                    }

                    .ticket-wares {
                        margin-top: 15px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 24px;

                        .font-size-24 {
                            font-size: 24px;
                        }
                    }

                    .ticket-num {
                        .font-size-48 {
                            font-size: 48px;
                        }
                    }
                }

                .divider {
                    width: 1px;
                    height: 80px;
                    border-radius: 1px;
                    border: 1px solid #FFD400;
                }

                .info-box {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 16px;
                    color: #212121;
                    height: 100px;
                    margin-left: 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding: 10px 0;
                    width: 540px;
                }

                .check-box {
                    ::v-deep {
                        .el-checkbox {
                            height: 40px;
                        }

                        .el-checkbox__inner {
                            width: 20px;
                            height: 20px;
                            border: 2px solid #666666;
                            border-radius: 4px;
                            background: #F9F9F9;
                        }

                        .is-checked {
                            .el-checkbox__label {
                                color: #FF6A00;
                            }

                            .el-checkbox__inner {
                                background: #F9F9F9;
                            }

                            .el-checkbox__inner {
                                width: 20px;
                                height: 20px;
                                border: 2px solid #FF6A00;
                                border-radius: 4px;
                                // background: #FF6A00;
                            }

                            .el-checkbox__inner::after {
                                border: 2px solid #FF6A00;
                                border-left: 0;
                                border-top: 0;
                                left: 6px;
                                top: 4px;
                            }
                        }
                    }
                }
            }
        }


        .unUse {
            -webkit-filter: grayscale(1);
            /* Chrome, Safari, Opera */
            filter: grayscale(1);
        }

        .dialog-title-row {
            display: flex;
            justify-content: space-between;

            .title {
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 20px;
                color: #212121;

                .num {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #FF3333;
                }
            }

            .tip {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #666666;
            }
        }
    }

}

.margin-top-10 {
    margin-top: 10px;
}

.margin-left-40 {
    margin-left: 20px;
}

.color-FF6A00 {
    color: #FF6A00;
}

.color-FF3333 {
    color: #FF3333;
}

.cursor-pointer {
    cursor: pointer;
}</style>
